import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { AppGlobalService } from 'src/app/shared/service/app-global.service';
import { IonSlides } from '@ionic/angular';
import { PageModalService } from 'src/app/shared/service/page-modal-service';
import { EventService } from 'src/app/shared/service/event.service';
//tslint:disable
@Component({
    selector: 'app-news-carousel',
    templateUrl: './news-carousel.component.html',
    styleUrls: ['./news-carousel.component.scss']
})
export class NewsCarouselComponent implements OnInit {
    @Input() tagData: any;
    @ViewChild('slideNewsCarousel') slides: IonSlides;
    newsList: any;
    slideOpts: any;
    idx: any = 1;
    appTypeCustom: any;
    ionSlidesCssStyle: any;
    isShowSlides = false;
    constructor(
        private appGlobalService: AppGlobalService,
        private pageModalService: PageModalService,
        private event: EventService,
    ) {
    }
    ngOnInit() {
        const bodyStyles = window.getComputedStyle(document.body);
        this.appTypeCustom = bodyStyles.getPropertyValue('--appTypeCustom').trim().replace('"', '').replace('"', '');
        this.newsList = this.tagData.data;
        this.ionSlidesCssStyle = "height:15.5rem;";// 默认值可配置        
        if (this.tagData && this.tagData.additional && this.tagData.additional.ionSlidesCssStyle !== undefined) {
            this.ionSlidesCssStyle += "height:" + (1.88 * this.newsList.length).toFixed(2) + 'rem;';
            this.ionSlidesCssStyle = this.tagData.additional.ionSlidesCssStyle;
        }
        this.slideOpts = {
            direction: 'vertical',
            initialSlide: 0,
            slidesPerView: 1,
            allowTouchMove: true,
            autoplay: {
                delay: 3000,
                disableOnInteraction: false
            },
            speed: 200,
            loop: true
        };

        if (this.tagData && this.tagData.additional && this.tagData.additional.slidesDeplay !== undefined) {
            this.slideOpts.autoplay.delay = parseInt(this.tagData.additional.slidesDeplay);
        }
        let slidesPerviewCount = 1
        if (this.tagData && this.tagData.additional && this.tagData.additional.slidesPerview) {
            slidesPerviewCount = parseInt(this.tagData.additional.slidesPerview);
            if (this.newsList.length < slidesPerviewCount) {
                slidesPerviewCount = this.newsList.length;
            }
            this.slideOpts.slidesPerView = slidesPerviewCount;
        }
        let slidesLoop = false
        if (this.tagData && this.tagData.additional && this.tagData.additional.slidesLoop !== undefined) {
            slidesLoop = true;
        }
        if (this.tagData && this.tagData.additional && this.tagData.additional.isPlayLoop !== undefined) {
            const dataLength = parseInt(this.tagData.additional.slidesPerview);
            if (this.newsList.length <= dataLength) {
                slidesLoop = false;
            }
        }
        this.slideOpts.loop = slidesLoop;
        setTimeout(() => {
            this.isShowSlides = true;
        }, 100);
    }

    getIndex(slides: IonSlides) {
        const that = this;
        slides.getActiveIndex().then(index => {
            that.idx = index;
            if (that.idx <= that.tagData.data.length) {
                that.idx = index
            } else {
                that.idx = 1;
            }
        })
    }

    slidesDidLoad(slides: IonSlides) {
        const that = this;
        slides.startAutoplay();
        slides.getActiveIndex().then(index => {
            that.idx = index;
        });
    }

    gotoPage(obj, event?) {
        try {
            if (event) {
                event.stopPropagation();
            }
            if (obj) {
                // const targetObj = { pageId: obj.target, params: obj.params, sessionId: localStorage.getItem('sessionId') };
                // this.appGlobalService.goToForward(targetObj);
                this.pageModalService.openPage(obj);
            }
        } catch (error) {
        }
    }

    clickImg(event?) {
        if (event) {
            event.stopPropagation();
            this.gotoPage(this.tagData.data[0].link);
        } else {
            // let that = this;
            const index = this.slides.getActiveIndex();
            this.slides.getActiveIndex().then(index => {
                const leng = this.tagData.data.length;
                if (index > leng) {
                    index = index - leng - 1;
                } else if (index === 0) {
                    index = leng - 1;
                } else {
                    index--;
                }
                console.log(index);
                this.gotoPage(this.tagData.data[index].link);
                // setTimeout(() => {
                //     that.slides.startAutoplay();
                // }, 1000);
            });
        }

    }

    getNgStyle(str) {
        try {
            return JSON.parse(str);
        } catch (error) {
            return {};
        }
    }
}
